<!--
 * @Author: Liu
 * @Date: 2023-05-08 10:52:26
 * @LastEditTime: 2023-05-08 17:28:40
-->
<template>
  <div class="popover-box" v-if="props.isShow">
    <div :class="['popover-content', 'dialog-inner', props.isShow && 'scale-in-center']">
      <div v-if="props.icon" class="icon"><img :src="props.icon" alt="" /></div>
      <div v-if="props.title" class="title">{{ props.title }}</div>
      <div class="popover-data"><slot /></div>
      
      <!-- <div class="tips" v-if="tips"><span>*可前往我的奖品页面查看获奖明细</span></div> -->
      <div class="footer" v-if="showShare">
        <div class="btn" role="button" @click="props.showShare ? $emit('showShareModal') :$emit('handleClose')">确&nbsp;&nbsp;认</div>
        <!-- <div class="btn" role="button" @click="$emit('showShareModal')">去邀请</div> -->
      </div>
      <div class="footer" v-else>
        <div class="btn" role="button" @click="$emit('handleClose')">确&nbsp;&nbsp;认</div>
      </div>
    </div>

  </div>
</template>

<script setup>
const props = defineProps({
  isShow: {
    type: Boolean,
    default: false
  },
  title: {
    type: String,
    // default: '恭喜您'
  },
  icon: {
    type: String
  },
  tips: {
    type: Boolean,
  },
  getRemainGameNum: {
    type: Number
  },
  showShare: {
    type: Boolean
  }
})

</script>
<style  scoped>
.popover-box {
  position: fixed;
  z-index: 100;
  background: rgba(0, 0, 0, 0.6);
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: "ChangAnunitype-Bold";
  top: 0;

}

.popover-content {
  width: 606px;
  min-height: 397px;
  padding: 50px;
  box-sizing: border-box;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* justify-content: center; */
  border-radius: 30px;
  text-align: center;
}

.icon {
  display: flex;
  justify-content: center;
  padding: 10px 0 15px 0;
}

.icon > img {
  max-width: 50%;
}

.tips {
  color: #999;
  font-size: 20px;
  font-family: "ChangAnunitype-Regular";
}

.popover-bg {
  width: 100%;
  height: 100%;
}

.bell_bg {
  position: absolute;
  width: 119px;
  height: 118px;
  top: -60px;
}

.bell {
  position: absolute;
  width: 61px;
  height: 62px;
  top: -30px;

}

.popover-data {
  font-family: "ChangAnunitype-Bold";
  font-size: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #3880f5;
  letter-spacing: 2px;
  font-weight: 900;
  margin-top: 20px;
}
.title {
  color: #3880f5;
}
.popover-content {
  /* background: url(/images/prize-modal.png); */
  background-size: 100% 100%;
}

.footer .btn {
  /* background: linear-gradient(180deg, #91d8ff, #4e81e9); */
  width: 200px;
  border-radius: 50px;
}
.footer .btn+.btn {
  margin-left: 40px;
}
</style>